<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String base = request.getContextPath();
%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Market Place</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <jsp:include page="/pages/common/include.jsp" flush="true"/>
    <link rel="stylesheet" type="text/css" href="<%=base%>/resources/css/hideMenu/wine-corner.css"/>
    <style>
        .mui-pull-bottom-pocket {
            display: none !important;
        }
    </style>
</head>

<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!--侧滑菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-left">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <jsp:include page="/pages/common/menu.jsp" flush="true"/>
            </div>
        </div>
    </aside>
    <!--主界面部分-->
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav" id="headBox">
            <jsp:include page="/pages/common/top.jsp" flush="true"/>
        </header>
        <header class="mui-bar mui-bar-nav GreenHeader">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <!--<h1 class="mui-title">Wine Corner</h1>-->
            <h1 class="mui-title">
                <div class="btnBox">
                    <a href="javascript:void(0)" class="mui-btn active">Wine Corner</a>
                    <a href="javascript:void(0)" class="mui-btn">All wine</a>
                </div>
            </h1>
        </header>
        <%--<div id="offCanvasContentScroll1" class="mui-content mui-scroll-wrapper noHead">--%>
        <%--<div class="mui-scroll">--%>
        <div class="wine-corner">

            <div class="mainContent">
                <div class="page winCor">
                    <!--banner-->
                    <div class="mui-content mui-scroll-wrapper noHead">
                        <div class="mui-scroll">
                            <div id="slider" class="mui-slider">
                                <div class="mui-slider-group mui-slider-loop">
                                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                                    <div class="mui-slider-item mui-slider-item-duplicate">
                                        <a href="javascript:void(0)">
                                            <img src="<%=base%>/resources/images/winecorner/winecorner-banner.png"/>
                                        </a>
                                    </div>
                                    <!-- 第一张 -->
                                    <div class="mui-slider-item">
                                        <a href="javascript:void(0)">
                                            <img src="<%=base%>/resources/images/winecorner/winecorner-banner.png"/>
                                        </a>
                                    </div>
                                    <!-- 第二张 -->
                                    <div class="mui-slider-item">
                                        <a href="javascript:void(0)">
                                            <img src="<%=base%>/resources/images/winecorner/winecorner-banner.png"/>
                                        </a>
                                    </div>
                                    <!-- 第三张 -->
                                    <div class="mui-slider-item">
                                        <a href="javascript:void(0)">
                                            <img src="<%=base%>/resources/images/winecorner/winecorner-banner.png"/>
                                        </a>
                                    </div>
                                    <!-- 第四张 -->
                                    <div class="mui-slider-item">
                                        <a href="javascript:void(0)">
                                            <img src="<%=base%>/resources/images/winecorner/winecorner-banner.png"/>
                                        </a>
                                    </div>
                                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                                    <div class="mui-slider-item mui-slider-item-duplicate">
                                        <a href="javascript:void(0)">
                                            <img src="<%=base%>/resources/images/winecorner/winecorner-banner.png"/>
                                        </a>
                                    </div>
                                </div>
                                <div class="mui-slider-indicator">
                                    <div class="mui-indicator mui-active"></div>
                                    <div class="mui-indicator"></div>
                                    <div class="mui-indicator"></div>
                                    <div class="mui-indicator"></div>
                                </div>
                            </div>
                            <div class="item">
                                <h1><img src="<%=base%>/resources/images/winecorner/hot-select.png"/> Top Picks</h1>
                                <div class="slideBox vertical-list">
                                    <ul></ul>
                                    <div class="controll-btn prev"><img
                                            src="<%=base%>/resources/images/icon/main-prev.png"/></div>
                                    <div class="controll-btn next"><img
                                            src="<%=base%>/resources/images/icon/main-next.png"/></div>
                                </div>
                            </div>
                            <div class="item">
                                <h1><img src="<%=base%>/resources/images/winecorner/new-select.png"/> New Arrival</h1>
                                <div class="content vertical-list">
                                    <ul>
                                        <li>
                                            <div class="mainCon">
                                                <div class="imgBox">
                                                    <img src="<%=base%>/resources/images/wine-pic1.png"/>
                                                    <span><em>offer</em></span>
                                                </div>
                                                <div class="txtBox">
                                                    <h4>Wolf blass</h4>
                                                    <p class="mui-ellipsis">Ps gold/ L cabsau 750ml</p>
                                                    <div class="red-font">Save 50%</div>
                                                    <div class="price orange-font">$20.00</div>
                                                    <div class="num">
                                                        <div class="mui-numbox" data-numbox-min='1'>
                                                            <button class="mui-btn mui-numbox-btn-minus" type="button">
                                                                -
                                                            </button>
                                                            <input class="mui-numbox-input" type="number" value="1"/>
                                                            <button class="mui-btn mui-numbox-btn-plus" type="button">
                                                                +
                                                            </button>
                                                        </div>
                                                        <div class="addCar">
                                                            Add<img
                                                                src="<%=base%>/resources/images/icon/main-shopcar.png"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="mainCon">
                                                <div class="imgBox">
                                                    <img src="<%=base%>/resources/images/wine-pic2.png"/>
                                                </div>
                                                <div class="txtBox">
                                                    <h4>Yellow tail</h4>
                                                    <p class="mui-ellipsis">Pinot grigio</p>
                                                    <div class="red-font">buy 3 get 1 free</div>
                                                    <div class="price">$20.00</div>
                                                    <div class="num">
                                                        <div class="mui-numbox" data-numbox-min='1'>
                                                            <button class="mui-btn mui-numbox-btn-minus" type="button">
                                                                -
                                                            </button>
                                                            <input class="mui-numbox-input" type="number" value="1"/>
                                                            <button class="mui-btn mui-numbox-btn-plus" type="button">
                                                                +
                                                            </button>
                                                        </div>
                                                        <div class="addCar">
                                                            Add<img
                                                                src="<%=base%>/resources/images/icon/main-shopcar.png"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="mainCon">
                                                <div class="imgBox">
                                                    <img src="<%=base%>/resources/images/wine-pic3.png"/>
                                                    <span><em>offer</em></span>
                                                </div>
                                                <div class="txtBox">
                                                    <h4>Wolf blass</h4>
                                                    <p class="mui-ellipsis">Ps gold/ L cabsau 750ml</p>
                                                    <div class="red-font">Save 50%</div>
                                                    <div class="price orange-font">$20.00</div>
                                                    <div class="num">
                                                        <div class="mui-numbox" data-numbox-min='1'>
                                                            <button class="mui-btn mui-numbox-btn-minus" type="button">
                                                                -
                                                            </button>
                                                            <input class="mui-numbox-input" type="number" value="1"/>
                                                            <button class="mui-btn mui-numbox-btn-plus" type="button">
                                                                +
                                                            </button>
                                                        </div>
                                                        <div class="addCar">
                                                            Add<img
                                                                src="<%=base%>/resources/images/icon/main-shopcar.png"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="mainCon">
                                                <div class="imgBox">
                                                    <img src="<%=base%>/resources/images/wine-pic4.png"/>
                                                </div>
                                                <div class="txtBox">
                                                    <h4>Yellow tail </h4>
                                                    <p class="mui-ellipsis">Pinot grigio</p>
                                                    <div class="red-font">buy 3 get 1 free</div>
                                                    <div class="price">$20.00</div>
                                                    <div class="num">
                                                        <div class="mui-numbox" data-numbox-min='1'>
                                                            <button class="mui-btn mui-numbox-btn-minus" type="button">
                                                                -
                                                            </button>
                                                            <input class="mui-numbox-input" type="number" value="1"/>
                                                            <button class="mui-btn mui-numbox-btn-plus" type="button">
                                                                +
                                                            </button>
                                                        </div>
                                                        <div class="addCar">
                                                            Add<img
                                                                src="<%=base%>/resources/images/icon/main-shopcar.png"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="learn-about">
                                <a class="mui-btn mui-btn-block">Learn About</a>
                            </div>
                            <div class="footer">
                                <jsp:include page="/pages/common/footer.jsp" flush="true" />
                            </div>
                        </div>

                    </div>

                </div>
                <div class="page allWine">
                    <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper noHead">
                        <div class="mui-scroll">
                            <div class="classify-name">
                                <%--<a href="javascript:void(0)" class="fresh-fruits"><img src="<%=base%>/resources/images/icon/pro-apple-icon.png" />Fresh food & Deli</a>--%>
                            </div>
                            <div class="tab">
                                <div>
                                    <select id="refine">
                                        <option value="refine">Refine</option>
                                        <option value="Cooked Meat">Cooked Meat</option>
                                        <option value="Fruit">Fruit</option>
                                        <option value="Meat & Poultry">Meat & Poultry</option>
                                        <option value="Seafood">Seafood</option>
                                        <option value="Vegetables">Vegetables</option>
                                    </select>
                                </div>
                                <div>
                                    <select id="sortBy">
                                        <option value="popularity" selected="selected">Popularity</option>
                                        <option value="specialty">Secialty</option>
                                        <option value="brand_asc">Brand Name A-Z</option>
                                        <option value="brand_desc">Brand Name Z-A</option>
                                        <option value="price_desc">Price (High to Low)</option>
                                        <option value="price_asc">Price (Low to High)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="content vertical-list">
                                <ul></ul>
                            </div>
                            <div class="footer">
                                <jsp:include page="/pages/common/footer.jsp" flush="true"/>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <%--</div>--%>
            <%--</div>--%>

            <!--searchbar-->
            <div class="searchBar">
                <jsp:include page="/pages/common/search.jsp" flush="true"/>
            </div>

            <div class="rightBottom animate"></div>

            <!-- off-canvas backdrop -->
            <div class="mui-off-canvas-backdrop"></div>
        </div>
    </div>
</div>
    <script type="text/javascript" src="<%=base%>/resources/js/hideMenu/corner-main.js"></script>
    <script type="text/javascript" src="<%=base%>/resources/js/set_product_list.js"></script>
    <script>

        //主界面和侧滑菜单界面均支持区域滚动；
        //			mui('#offCanvasSideScroll').scroll();
        mui('.mui-scroll-wrapper').scroll();
    </script>
</body>

</html>